<template>
  <main class="main">
    <transition name="scale-fade">
      <img v-if="ready" class="countdown-img" :src="imgSrc" alt="countdown" />
    </transition>
    <!-- <audio src="../../assets/audio/countdown.mp3" ref="audio">
      浏览器版本过低，请尽快升级
    </audio> -->
  </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { GET_USER_INFO } from "@/store/mutation-types";
import img1 from "@/assets/countdown/1.svg";
import img2 from "@/assets/countdown/2.svg";
import img3 from "@/assets/countdown/3.svg";

export default {
  name: "CountdownView",
  data() {
    return {
      ready: false,
      count: 0,
      imgs: [img3, img2, img1],
    };
  },
  computed: {
    imgSrc() {
      return this.imgs[this.count];
    },
    ...mapState(["mute", "gameMode"]),
  },
  methods: {
    playCountdown() {
      if (this.count === 3) {
        clearInterval(this.interval);
        // 使路由在quiz页返回直接跳到首页
        // this.$router.replace('/quiz');
        return;
      }
      this.ready = true;
      setTimeout(() => {
        this.ready = false;
        this.count += 1;
      }, 1000);
    },
    ...mapMutations({
      getUserInfo: GET_USER_INFO,
    }),
  },
  created() {
    this.$nextTick(() => {
      this.interval = setInterval(() => {
        this.playCountdown();
      }, 1300);
    });
  },
  mounted() {
    this.getUserInfo();
  },
  beforeUnmount() {
    clearInterval(this.interval);
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  background: #f6f5f5 url("~@/assets/countdown/countdown-background.png")
    no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .countdown-img {
    width: 60%;
  }
  // 进出动画
  .scale-fade-enter-active {
    transition: all 0.6s;
  }
  .scale-fade-leave-active {
    transition: all 0.2s;
  }
  .scale-fade-enter {
    transform: scale(0.3);
    opacity: 0;
  }
  .scale-fade-leave-to {
    opacity: 0;
  }
}
</style>
